<template>
  <div>
    <h2 class="detail-title">实验基本信息</h2>
    <div class="detail-info">
      <div class="detail-item">实验ID：{{data.id}}</div>
      <div class="detail-item">实验名称：{{data.experiment_name}}</div>
      <div class="detail-item">实验时长：{{data.duration}}</div>
      <div class="detail-item">知识点列表：{{data.knowledges}}</div>
      <div class="detail-item">关联知识点路径：{{data.konwledges_path}}</div>
      <div class="detail-item">结束时间：{{data.ending_time}}</div>
    </div>
    <h2 class="detail-title">实验环境信息</h2>
    <div class="detail-info">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="实验环境id"></el-table-column>
        <el-table-column prop="environment_name" label="实验环境名称"></el-table-column>
        <el-table-column prop="images" label="镜像列表"></el-table-column>
        <el-table-column prop="subnet_name" label="子网名称"></el-table-column>
        <el-table-column prop="cidr_block" label="网段"></el-table-column>
        <el-table-column prop="isOpenLabel" label="是否开放外网"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="onShowDetail(scope.row)"
              size="small"
              class="text-button"
            >查看详情</el-button>
            <el-button @click="onSend(scope.row)" size="small" class="text-orange">下发实情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <IssueEnv @onClose="onClose" :visible="dialogVisible" :env_id="issue_env_id"  />
    <el-button class="go-back-btn" @click="goBack" type="primary">返回</el-button>
  </div>
</template>
<script>
import goBack from "@/mixins/goBack";
import { experimentModel} from "@/api/admin_models";
import issueEnv from '@/mixins/issueEnv.js'
export default {
  mixins: [goBack, issueEnv],
  components: {},
  data() {
    return {
      data: {},
      id: null,
      tableData: []
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getItem();
  },
  methods: {
    onShowDetail(row){
      this.$router.push('/env/' + row.id)
    },
    getItem() {
      experimentModel.item(this.id, res => {
        this.data = res.data;
        if(res.data.environment_id) {
          this.getEnv(res.data.environment_id);
        }
      });
    },
    getEnv(id) {
      experimentModel.env(id, res => {
        res.data.id = id;
        this.tableData = this.tableData.concat([res.data])
      })
    }
  }
};
</script>
<style lang="scss">
</style>